<template>
	<el-tree-select
		v-model="modelValue"
		:style="{ width: width }"
		:data="$store.getters.menus"
		:render-after-expand="false"
		:check-strictly="true"
		:props="{ label: labelFunc, value: 'menuId' }"
		highlight-current
		:placeholder="placeholder"
		clearable
		:size="size"
		:disabled="disabled"
	/>
</template>

<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: null,
		},
		size: {
			type: String,
			default: "",
			enum: ["", "large", "default", "small"],
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		width: {
			type: [Number, String],
			default: "100%",
		},
	},
	data() {
		return {
			value: null,
		};
	},
	watch: {
		value(v) {
			this.$emit("input", v);
		},
	},
	methods: {
		labelFunc(data) {
			return data.meta ? data.meta.title : "-";
		},
	},
};
</script>
